
//reset
*{
	box-sizing: border-box;
	outline: none;
}

html{
	font-size: 15px;
}

body{
	margin: 0;
	font-family: Arial, helvetica, sans-serif;
	line-height: 1.2em;
	background: lightgrey;
}

//定义一个变量colors，将会用到的颜色都放在这里
$colors:(
	primary:#99CCFF,
	black:black,
	white:white,
	secondary:#CCFFFF,
	side:#CCFF99
);
@each $colorKey, $color in $colors {
	.text-#{$colorKey}{
		color: $color !important;
	}
	.bg-#{$colorKey}{
		background-color: $color !important;
	}
}

//font size
$base-font-size: 1rem;
$font-sizes:(
	xs:0.625,
	sm:0.85,
	md:1,
	lg:1.25,
	xl:1.5,
);
@each $sizeKey, $size in $font-sizes {
	.fs-#{$sizeKey}{
		font-size: $size * $base-font-size;
	}
}

//常用的边距定义
//flex
.d-flex{
	display: flex;
}

.flex-column{
	flex-direction: column;
}

$flex-jc:(
	start:flex-start,
	end:flex-end,
	center:flex-center,
	between:space-between,
	around:space-around
);

@each $key,$value in $flex-jc{
	.jc-#{$key}{
		justify-content: $value;
	}
}

$flex-ai:(
	start:flex-start,
	end:flex-end,
	center:center,
	stretch:stretch,
);

@each $key,$value in $flex-ai{
	.ai-#{$key}{
		align-items: $value;
	}
}

.flex-1{
	flex:1;
}

//spacing
//0-5
//.mt-1 => margin top   .pd-2
$spacing-types:(m:margin, p:padding);
$spacing-directions:(t:top, r:right, b:bottom, l:left);
$spacing-base-size: 2rem;
$spacing-sizes:(0:0, 1:0.25, 2:0.5, 3:1, 4:1.5, 5:3);
//三重嵌套
@each $typeKey,$type in $spacing-types{
	//.m-1
		@each $sizeKey,$size in $spacing-sizes{
			.#{$typeKey}-#{$sizeKey}{
				#{$type}:$size = $spacing-base-size;
			}
		}
	
	//.mx-1,my-1
		@each $sizeKey,$size in $spacing-sizes{
			.#{$typeKey}x-#{$sizeKey}{
				#{$type}-right:$size = $spacing-base-size;
				#{$type}-left:$size = $spacing-base-size;
			}
			.#{$typeKey}y-#{$sizeKey}{
				#{$type}-top:$size = $spacing-base-size;
				#{$type}-bottom:$size = $spacing-base-size;
			}
		}
	
	//.mt-1
	@each $directionKey,$direction in $spacing-directions{
		@each $sizeKey,$size in $spacing-sizes{
			.#{$typeKey}#{$directionKey}-#{$sizeKey}{
				#{$type}-#{$direction}:$size = $spacing-base-size;
			}
		}
	}
}

//导航样式
.nav {
	.nav-item{
		border-bottom: 3px solid transparent;
		padding-bottom: 0.2rem;
		&.active{
			border-bottom: 3px solid #C7006A;
		}
	}
}

.router-link-active{
	text-decoration: none;
}

.w-100{
	width: 100%;
}
.h-100{
	height: 100%;
}